<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
// eslint-disable-next-line no-const-assign
import { TabsPaneContext } from 'element-plus'

// 导航栏，暂时..
const tabs = ref([
  { label: '首页', name: '首页' },
  { label: '政治', name: '政治' },
  { label: '经济', name: '经济' },
  { label: '科技', name: '科技' },
  { label: '社会', name: '社会' },
  { label: '娱乐', name: '娱乐' },
  { label: '文化', name: '文化' },
  { label: '健康', name: '健康' },
  { label: '科学', name: '科学' },
  { label: '体育', name: '体育' },
  { label: '教育', name: '教育' },
  { label: '国际', name: '国际' },
  { label: '环境', name: '环境' },
  { label: '习言道', name: '习言道' },
  { label: '战略军事', name: '战略军事' },
  { label: '人文历史', name: '人文历史' }
])

// 导航跳转
const router = useRouter()
const handleClick = (tab: TabsPaneContext) => {
  //console.log(tab, event)
  const activeName = tab.props.name // 获取选项卡的标签
  //console.log('activeName=',activeName);
  if ((activeName as string) === '首页') {
    router.push('/newsHomepage') // 主页
  } else {
    router.push({ name: 'newsClassification', params: { words: activeName } }) // 分类页面
  }
}

// 搜索框
const searchText = ref('')
function handleSearch() {
  console.log('搜索文本:', searchText.value)
  searchText.value = ''
}

//pc实际上是跳转登录
const pc = () => {
  router.push('/login')
}
//发布新闻
const releaseNews = () => {
  router.push('/userReleaseNews')
}
//我的收藏
const collect = () => {
  router.push('/collection')
}
//个人主页
const userHome = () => {
  router.push('/userHome')
}
</script>

<template>
  <div class="affix-container">
    <!-- 顶部 -->
    <div class="search-box">
      <el-row :gutter="24" type="flex" justify="center">
        <el-col :span="5" class="centered-column">
          <img
            src="//image.cns.com.cn/default/5ddb9ec3/20210721/9.jpg"
            alt="World News"
            style="width: 200px"
          />
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="8">
          <el-input
            v-model="searchText"
            size="large"
            placeholder="请输入搜索的新闻或作者"
            @keyup.enter="handleSearch"
            :suffix-icon="Search"
          />
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
          <div>
            <div class="icon-box">
              <el-icon color="#EC3742" size="30px"><Platform /></el-icon>
              <div class="text" @click="pc">下载PC端</div>
            </div>
            <div class="icon-box">
              <el-icon color="#EC3742" size="30px"><Promotion /></el-icon>
              <div class="text" @click="releaseNews">发布新闻</div>
            </div>
            <div class="icon-box">
              <el-icon color="#EC3742" size="30px"><Management /></el-icon>
              <div class="text" @click="collect">我的收藏</div>
            </div>
            <div class="icon-box">
              <el-icon color="#EC3742" size="30px"><Avatar /></el-icon>
              <div class="text" @click="userHome">个人主页</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 分割线 -->
    <div class="divider"></div>
    <!-- 导航栏 -->
    <el-affix :offset="0">
      <el-tabs class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
        </el-tab-pane>
      </el-tabs>
    </el-affix>
    <div style="width: 1400xp">
      <!-- 二级路由出口 -->
      <router-view></router-view>
    </div>
    <!-- 版权底部 -->
    <div class="footer">
      <div class="copyright">
        <p>
          <a href="#">关于我们</a>| <a href="#">帮助中心</a>| <a href="#">新闻服务</a>|<a
            href="#"
            >审核与发布 </a
          >|<a href="#">商务合作</a>|<a href="#">搜索推荐</a>|<a href="#">友情链接</a>
        </p>
        <p>天下新闻 ©2023 Created by AAA小组</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.affix-container {
  text-align: center;
  background: white;
  /* height: 1000vh; */
  display: flex;
  flex-direction: column; /*主轴方向为垂直方向*/
  align-items: center; /* 交叉轴对齐方式为居中 */
}
.divider::before {
  content: '';
  background-color: #ec3742;
  height: 3px;
  width: 1600px;
  border-radius: 10px;
  display: block;
  margin: 0 auto; /* 居中显示 */
}

.search-box {
  /* 顶部容器 */
  margin-bottom: 50px;
  margin-top: 50px;
  width: 1400px;
}
.icon-box {
  /* 图标容器 */
  display: inline-block;
  margin-left: 20px;
}

.icon-box .text {
  background: linear-gradient(to right, #ec3742, #ec3742) no-repeat right bottom;
  background-size: 0px 1px;
  font-size: 10px;
  transition: background-size 0.3s;
}
.text:hover {
  background-position: left bottom;
  background-size: 100% 1px;
  color: #ec3742;
  cursor: pointer;
}

.search-box :deep(.el-input) {
  --el-input-focus-border-color: #ec3742;
}

.demo-tabs :deep(.el-tabs__nav) {
  background-color: white;
}

.demo-tabs :deep(.el-tabs__active-bar) {
  background-color: #ec3742;
}

.demo-tabs :deep(.el-tabs__item.is-active) {
  color: #ec3742;
}

.demo-tabs :deep(.el-tabs__item:hover) {
  color: #ec3742;
}
.demo-tabs :deep(.el-tabs__item) {
  padding: 0 15px !important;
  margin-right: 20px;
  font-size: 17px;
  height: 50px;
}
.demo-tabs :deep(.el-tabs__header) {
  margin: 0 0 1px;
}

.footer {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}
.copyright {
  margin: 50px;
  text-align: center;
  color: #a1a1a1;
}
.copyright a {
  margin: 0 10px;
  color: #a1a1a1;
}
</style>
